import 'package:xbaistack/page/tabbar_page/my_tabbar.dart';
import 'package:xbaistack/page/tabbar_page/tab_page.dart';
import 'package:flutter/material.dart';


class TabbarPage extends StatefulWidget {
  const TabbarPage({super.key});

  @override
  State<StatefulWidget> createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage>
  with TickerProviderStateMixin<TabbarPage> {
  
  final _tabs = <String>["精选", "推荐", "关注", "朋友", "我的"];
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      vsync: this, 
      length: _tabs.length, 
      initialIndex: 0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              floating: true,
              pinned: true,
              forceElevated: innerBoxIsScrolled,
              title: const Text("tabBar使用"),
              bottom: MyTabBar(
                height: 35, // 高度
                controller: _tabController,
                
                // 标签的颜色
                labelColor: Colors.redAccent,
                unselectedLabelColor: Colors.grey,

                // 标签的文本样式
                labelStyle: const TextStyle(fontWeight: FontWeight.bold),
                unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.normal),
                
                // 指示器的样式
                indicatorColor: Colors.redAccent,
                indicatorSize: TabBarIndicatorSize.tab,
                
                // 不要分割线
                dividerHeight: 0,
                // 去除点击效果
                overlayColor: WidgetStateProperty.all(Colors.transparent),

                // 标签列表
                tabs: List.generate(
                  _tabs.length,
                  (index) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Text(_tabs[index]),
                  ),
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: List.generate(
            _tabs.length, 
            (index) => TabPage(tab: _tabs[index]),
          ),
        ),
      ),
    );
  }
}